<template>
	<view>
		<b-navigator :active-index="activeIndex"></b-navigator>
		<b-header></b-header>
		<view class="main">
			<match-media :min-width="768">
			<el-form ref="organizationRef" :model="form" label-width="120" style="min-width: 30%;">
				<el-form-item label="选择区域" prop="streetId">
				    <el-cascader
				        v-model="form.streetId"
				        :options="options"
				        :props="props"
						style="width: 100%"
						@change="streetChange"/>
				</el-form-item>
				<el-form-item label="机构" prop="name">
				    <el-input v-model="form.name" placeholder="请输入" @change="nameChange"/>
				</el-form-item>
				<el-form-item label="机构等级">
					<el-radio-group v-model="form.grade" size="large" @change="radioChange">
						<el-radio-button v-for="(item, index) in radioList" :value="item.value">{{item.name}}</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="机构类型">
					<el-radio-group v-model="form.serviceType" size="large" @change="radio2Change">
						<el-radio-button v-for="(item, index) in radio2List" :value="item.value">{{item.name}}</el-radio-button>
					</el-radio-group>
				</el-form-item>
				
			</el-form>
			</match-media>
			<match-media :max-width="768">
				<view class="param-row">
					<view class="param-row-item" style="margin-right: 30rpx;" @click="show = true">
					<text style="font-size: 28rpx;">区域  {{ form.streetName }}</text>
					<view style="display: flex;flex-direction: row;">
						<text style="font-size: 28rpx;">{{ form.streetP }}</text>
						<u-icon name="arrow-right" color="#333" size="26rpx"></u-icon>
					</view>
				</view>
				<view class="param-row-item"> <u-input placeholder="请输入机构" border="surround" v-model="form.name" @change="nameChange"></u-input></view>
				</view>
				<view class="param-radio-item">
					
					  <u-radio-group
					    v-model="form.grade"
					    placement="row"
						@change="radioChange"
					  >
					    <u-radio
					      :customStyle="{marginBottom: '8px'}"
					      v-for="(item, index) in radioList"
					      :key="index"
					      :label="item.name"
					      :name="item.value"
					   
					    >
					    </u-radio>
					  </u-radio-group>
				</view>
				<view class="param-radio-item" style="padding-top: 20rpx;">
					
					  <u-radio-group
					    v-model="form.serviceType"
					    placement="row"
						@change="radio2Change"
					  >
					    <u-radio
					      :customStyle="{marginBottom: '8px'}"
					      v-for="(item, index) in radio2List"
					      :key="index"
					      :label="item.name"
					      :name="item.value"
					   
					    >
					    </u-radio>
					  </u-radio-group>
				</view>
				
				
			
			
			
				
			</match-media>
		</view>
		<view >
			<u-picker :show="show" ref="uPicker" keyName="name" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
		</view>
		<view class="main">
			<view class="news-list-wrap">
				 <text class="page-title">{{ total }}家服务组织</text>
				<view v-for="(item, index) in organList" class="news-list-item" @click="handlerRoute(item.id)" :key="index">
					<view class="news-image-wrap"><image class="news-image" :src="baseUrl + item.imgUrl" mode="aspectFill"></image></view>
					<view class="news-content">
						<view class="news-title">{{ item.name }}</view>
						<view class="news-des">地址：{{ item.address.slice(0,15) }}</view>
						<view class="news-des">电话：{{ item.concatPhone }}</view>
							<view class="news-price">￥{{ item.price }}</view>
						<el-button type="warning" size="small" class="read-more-btn" @click="handlerRoute(item.id)">查看详情</el-button>
					</view>
				</view>
				<el-pagination v-model:current-page="currentPage" 
				               v-model:page-size="pageSize" 
							   style="display: flex;justify-content: center;; width: 100%; padding: 8px;"
				                small layout="prev, pager, next" :total="total"
				                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</view>
		</view>
		  
		
		 <b-footer></b-footer>
	</view>
</template>

<script>
	import bNavigator from '../../components/b-navigator.vue'
	import bFooter from '../../components/b-footer.vue'
	import bHeader from '../../components/b-header.vue'
	import { getDicts, organList } from '../../config/api'
	import { baseUrl } from '../../config/config'
	import { route } from '@/uni_modules/uview-plus';
	export default {
		components: { bNavigator, bFooter, bHeader },
		data() {
			return {
				activeIndex: '/pages/organ/index',
				form: {
					street: [1,2,3,4]
				},
				options: [{
				    id: 1,
				    name: '山东省',
				    children: [{
				      id: 2,
				      name: '潍坊市',
				      children: [{
				        id: 3,
				        name: '青州市',
				        children: [{
				          id: 4,
				          name: '青州街道',
				        }]
				      }]
				    }]
				  }],
				props: {
				      value: 'id',
				      label: 'name',
				      children: 'children'
				    },
				show: false,
				columns: [
				[{name: '潍坊', id:2}],
				[{name: '青州市', id:3}],
				[{name: '青州街道', id:4}]
				],	
				radioList: [],
				radio2List: [],
				total: 0,
				currentPage: 1,
				pageSize: 5,
				organList:[{name: 'ceshi', address:'ceshi'}],
				baseUrl: baseUrl.slice(0,baseUrl.length-1)
			}
		},
		onLoad() {
		
			this.getDictData()
			this.getOrganList()
		},
		methods: {
			getDictData() {
				getDicts('yl_service_type').then(res => {
					this.radio2List = res.data.map(p => ({ name: p.dictLabel, value: p.dictValue}))
					this.radio2List.unshift({name: '全部', value: ''})
				})
				getDicts('yl_grade').then(res => {
					this.radioList = res.data.map(p => ({ name: p.dictLabel, value: p.dictValue}))
					this.radioList.unshift({name: '全部', value: ''})
				})
			},
			streetChange() {
				this.getOrganList()
			},
			nameChange() {
				console.log(this.form.name)
				this.getOrganList()
			},
			radioChange() {
				console.log(this.form.grade)
				this.getOrganList()
			},
			radio2Change() {
				this.getOrganList()
			},
			handleSizeChange(val) {
			   this.pageSize = val
			   this.getOrganList()
			 },
			 handleCurrentChange(val) {
			   this.currentPage = val
			   this.getOrganList()
			 },
			 getOrganList() {
				 const Params = {
				 	pageNum: this.currentPage,
				 	pageSize: this.pageSize,
					grade: this.form.grade,
					serviceType: this.form.serviceType,
					name: this.form.name,
					streetId: this.form.street[this.form.street.length - 1]
				 }
				 organList(Params).then(res =>{
					 this.organList = res.rows
					 this.total = res.total
				 })
			 },
			 
			handlerRoute(viewId) {
				route('/pages/organ/vrView', {
					id: viewId
				});
			},
			confirm(e) {
				this.form.streetName = e.value[2].name
				this.form.street = e.value.map(item =>{return item.id} )
				this.getOrganList()
				this.show = false
			},
			cancel() {
				this.show = false
			}
		
		}
	}
</script>

<style>
.news-list-wrap {
	width: 100%;
	
	.page-title {
	  width: 100%;
	  position: relative;
	  margin-bottom: 15px;
	  padding-bottom: 12px;
	  line-height: 28px;
	  border-bottom: 1px solid #ea6101;
	  color: #ea6101;
	  font-size: 16px;
	  text-align: left;
	  font-weight: bold;
	}

	.news-list-item {
		padding: 20px;
		width: 100%;
		background-color: #ffffff;
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		border-radius: 4px;
		display: flex;
		align-items: flex-start;
		position: relative;

		.news-image-wrap {
			width: 250px;
			margin-right: 20px;
			overflow: hidden;

			.news-image {
				width: 250px;
				height: 100px;
				transition: all 0.3s linear;
			}

			&:hover {
				image {
					transform: scale(1.1);
				}
			}
		}

		.news-content {
			width: 60%;
			position: relative;
			/* height: 200px; */

			.news-date {
				color: #ea6101;
				margin-bottom: 5px;
			}

			.news-date,
			.news-title {
				font-weight: bold;
				margin-bottom: 15px;
			}

			.news-title {
				font-size: 16px;

				&:hover {
					color: #ea6101;
				}
			}

			.news-des {
				font-size: 14px;
				color: #888888;
				margin-bottom: 15px;
			}
			.news-price {
				font-size: 14px;
				color: #ea6101;
				margin-bottom: 15px;
				/* display: flex;
				justify-content: flex-start;
				align-items: center; */
			}

			.read-more-btn {
				position: absolute;
				right: 0px;
				bottom: 0px;

			}
		}

		&:after {
			content: '';
			width: 0;
			height: 4px;
			background-color: #ea6101;
			position: absolute;
			left: 0;
			bottom: 0;
			transition: all 0.2s linear;
			border-bottom-right-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		&:hover::after {
			width: 100%;
		}
	}
}

@media screen and (max-width: 960px) {
	.main {
		flex-direction: column;
		position:relative;
		z-index: 0
		
	}
	
	
	
	.param-row {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-right: 90rpx;
			

		}
	.param-row-item {
			border: 1rpx solid #ccc;
			padding: 0 20rpx;
			margin-top: 20rpx;
			border-radius: 50rpx;
			width: 600rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 68rpx;
		}
		.param-radio-item {
			padding: 0 20rpx;
			margin-top: 30rpx;
			width: 600rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 68rpx;
		}

	.news-list-wrap {
		width: 87%;

		.news-list-item {
			flex-direction: column;
			padding: 20rpx;

			.news-image-wrap {
				width: 100%;
				height: 250rpx;
				margin-bottom: 20rpx;

				.news-image {
					width: 100%;
					height: 250rpx;
				}
			}

			.news-content {
				width: 100%;
			/* height: 200rpx; */

				.read-more-btn {
					position: absolute;
					right: 0px;
					bottom: 0px;
					
				}
			}
		}
	}

}
</style>
